<template>
    <div>
        <base-list ref="badBox" :condition="condition" :datas.sync="badBox" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="80px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="箱号">
                            <el-input v-model="condition['search_LIKE_containerNo']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱型">
                            <autoSearchEntrust v-model="condition['search_LIKE_containerType']"></autoSearchEntrust>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="尺寸">
                            <auto-search-size v-model="condition['search_LIKE_containerSize']"></auto-search-size>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="空重">
                            <el-select v-model="condition['search_EQ_ifHeavy']" placeholder="请选择空重" clearable>
                                <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱主">
                            <autoSearchCustom @selectName="v=>condition['search_LIKE_ownerName']=v" :isOwner="true"></autoSearchCustom>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱状态">
                            <el-select v-model="condition['search_EQ_status']" placeholder="请选择箱状态" clearable>
                                <el-option v-for="[key, val] in _dictContainerStatus" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-button class="ml-80" @click="handleDialogFormOpen(false)">新 增</el-button>
                        <el-button @click="handleNormal">标记正常</el-button>
                        <el-button @click="handleExport">箱导出</el-button>
                        <excel-import code="HXDR" @getUploadData="handleImport"></excel-import>
                        <el-button type="primary" icon="el-icon-search" @click="loadData">查 询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table slot="list" :data="badBox" border stripe max-height="500" @selection-change="handleSelectionChange">
                <el-table-column fixed="left" type="selection" width="55"></el-table-column>
                <el-table-column prop="containerNo" label="箱号"  min-width="140"></el-table-column>
                <el-table-column label="箱状态"  min-width="140">
                    <template slot-scope="scope">
                        {{scope.row.status| _filterContainerStatus}}
                    </template>
                </el-table-column>
                <el-table-column prop="damageName" label="箱损状态"  min-width="140"></el-table-column>
                <el-table-column prop="containerType" label="箱型"  min-width="100"></el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="100"></el-table-column>
                <el-table-column prop="ifHeavy" label="空重"  min-width="100">
                    <template slot-scope="scope">
                        {{ scope.row.ifHeavy | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="ownerName" label="箱主"  min-width="120"></el-table-column>
                <el-table-column prop="createBy" label="录入人"  min-width="100"></el-table-column>
                <el-table-column prop="createDateTime" label="录入时间"  min-width="160"></el-table-column>
                <el-table-column fixed="right" align="center" label="操作"  width="140">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" :disabled="!scope.row.status" @click="handleDialogFormOpen(true,scope.row)" v-if="power('WBUSMGR_BUSMGR_CUSTOM:UPD')">
                            编辑
                        </el-button>
                        <el-button type="text" class="danger" size="small" @click="handleRemove(scope.row.id)" v-if="power('WBUSMGR_BUSMGR_CUSTOM:DEL')">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </base-list>
        <bad-box-form ref="badBoxForm" @load="loadData"></bad-box-form>
    </div>
</template>

<script>
import ExcelImport from "@/components/excel/import";
import { newExportExcel } from "@/utils/newExport";
import { ifHeavyType, tradeType } from "@/assets/dict";
import autoSearchEntrust from "@/components/autocomplete/autoSearchEntrust";
import autoSearchSize from "@/components/autocomplete/autoSearchSize";
import autoSearchCustom from "@/components/autocomplete/autoSearchCustom";
import {
    getBadBox,
    delBadBox,
    toNormal,
    importBadBox
} from "@/api/middleControl/middleControl";
import { MessageBox } from 'element-ui';
import badBoxForm from "./badBoxForm";
export default {
    components: {
        ExcelImport,
        autoSearchEntrust,
        autoSearchSize,
        autoSearchCustom,
        badBoxForm
    },
    data() {
        return {
            badBox: [],
            condition: {},
            pageSearch: getBadBox,
            badBoxSelect: [],
            dialogForm: true
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {
        loadData() {
            this.$refs.badBox.loadData();
        },
        handleSelectionChange(val) {
            this.badBoxSelect = JSON.parse(JSON.stringify(val));
        },
        // 打开form表单,如果是编辑,则给form赋值
        handleDialogFormOpen(isEdit, item) {
            if (isEdit) {
                this.$refs.badBoxForm.isEdit = true;
                this.$refs.badBoxForm.form = JSON.parse(JSON.stringify(item));
            }
            this.$refs.badBoxForm.dialogForm = true;
        },
        // 通过ID删除
        handleRemove(id) {
            MessageBox.confirm("此操作将删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                delBadBox(id).then(res => {
                    this.$message({
                        message: `删除成功!`,
                        type: "success"
                    });
                    this.loadData();
                });
            });
        },
        handleNormal() {
            if (this.badBoxSelect.length === 0) {
                this.$message({
                    message: `请先选择一条数据!`,
                    type: "error"
                });
                return;
            } else {
                let data = [];
                for (let i = 0; i < this.badBoxSelect.length; i++) {
                    const element = this.badBoxSelect[i];
                    data.push({ id: element.id });
                }
                toNormal(data).then(res => {
                    this.$message({
                        message: `标记成功!`,
                        type: "success"
                    });
                    this.loadData();
                });
            }
        },
        // 坏箱批量导入
        handleImport(arr) {
            importBadBox(arr).then(res => {
                this.$message({
                    message: `导入成功!`,
                    type: "success"
                });
                this.loadData();
            });
        },
        // 坏箱导出
        handleExport() {
            let map = new Map();
            map.set("containerNo", "箱号");
            map.set("stattus", "箱状态");
            map.set("damageName", "箱损状态");
            map.set("containerType", "箱型");
            map.set("containerSize", "尺寸");
            map.set("ifHeavy", "空重");
            map.set("tradeType", "内外贸");
            map.set("ownerName", "箱主");
            map.set("createBy", "录入人");
            map.set("createDateTime", "录入时间");
            let exportRecords = [];
            let exportArr = JSON.parse(JSON.stringify(this.badBox));
            exportArr.forEach(record => {
                let exportRecord = {};
                for (let [key, value] of map.entries()) {
                    if (key === "ifHeavy") {
                        record[key] = ifHeavyType.get(record[key]);
                    }
                    if (key === "tradeType") {
                        record[key] = tradeType.get(record[key]);
                    }
                    exportRecord[value] = record[key];
                }
                exportRecords.push(exportRecord);
            });
            newExportExcel("坏箱", exportRecords);
        },
    }
};
</script>

<style>
</style>
